<template>
  <div style="height:100%;">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:1%">岗位分布</div>
      <div style="height:100%">
        <ul>
          <li
            v-for="(item,index) in postStatistics"
            :key="index"
            style="margin-bottom:1rem;color:#fff;"
          >
            <div class="flexStart">
              <div style="text-align:right;font-size:1.2rem;width:46%">{{item.name}}</div>
              <div class="barDiv">
                <div class="barDiv-active" :style="'width:'+(item.value/max)*100+'%'"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      max:0
    }
  },
  props: ['postStatistics'],
  watch: {
    postStatistics: {
      handler(val, oldVal) {
      if (val.length>0) {
        val.forEach(res => {
          if (res.value>this.max) {
            this.max=res.value
          }
        });
        // console.log(this.max);
        
      }
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  overflow: auto;
  height: 80%;
  width: 100%;
  margin: 0 auto;
}
ul::-webkit-scrollbar {
  display: none;
}
.barDiv {
  width: 50%;
  height: 1.2rem;

  margin-left: 1rem;
}
.barDiv-active {
  background: #7ae2eb;
  border-radius: 0.6rem;
  height: 1.2rem;
}
.flexStart {
  align-items: center;
}
</style>